@if (form) {
  <form [formGroup]="form" class="py-2 abp-md-form" (ngSubmit)="submit()" [validateOnSubmit]="true">
    <div class="mb-3 form-group">
      <label class="form-label"
        >{{ 'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
        }}<span class="ms-1">*</span></label
      >
      <input type="text" class="form-control" formControlName="defaultFromDisplayName" />
    </div>
    <div class="mb-3 form-group">
      <label class="form-label"
        >{{ 'AbpSettingManagement::DefaultFromAddress' | abpLocalization
        }}<span class="ms-1">*</span></label
      >
      <input type="text" class="form-control" formControlName="defaultFromAddress" />
    </div>
    <div class="mb-3 form-group">
      <label class="form-label">{{ 'AbpSettingManagement::SmtpHost' | abpLocalization }}</label>
      <input type="text" class="form-control" formControlName="smtpHost" />
    </div>
    <div class="mb-3 form-group">
      <label class="form-label"
        >{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}<span class="ms-1">*</span></label
      >
      <input type="number" class="form-control" formControlName="smtpPort" />
    </div>

    <div class="form-check mb-2">
      <input
        type="checkbox"
        id="smtp-enable-ssl"
        class="form-check-input"
        formControlName="smtpEnableSsl"
      />
      <label class="form-check-label" for="smtp-enable-ssl">{{
        'AbpSettingManagement::SmtpEnableSsl' | abpLocalization
      }}</label>
    </div>
    <div class="form-check mb-2">
      <input
        type="checkbox"
        id="smtp-use-default-credentials"
        class="form-check-input"
        formControlName="smtpUseDefaultCredentials"
      />
      <label class="form-check-label" for="smtp-use-default-credentials">{{
        'AbpSettingManagement::SmtpUseDefaultCredentials' | abpLocalization
      }}</label>
    </div>

    <div
      [@collapse]="{
        value: form.get('smtpUseDefaultCredentials')?.value ? 'collapsed' : 'expanded',
        params: { time: '200ms', easing: 'linear' },
      }"
    >
      <div class="mb-3 form-group">
        <label class="form-label">{{ 'AbpSettingManagement::SmtpDomain' | abpLocalization }}</label>
        <input type="text" class="form-control" formControlName="smtpDomain" />
      </div>

      <div class="mb-3 form-group">
        <label class="form-label">{{
          'AbpSettingManagement::SmtpUserName' | abpLocalization
        }}</label>
        <input type="text" class="form-control" formControlName="smtpUserName" />
      </div>

      <div class="form-group">
        <label class="form-label">{{
          'AbpSettingManagement::SmtpPassword' | abpLocalization
        }}</label>
        <input type="password" class="form-control" formControlName="smtpPassword" />
      </div>
    </div>

    <hr />

    <abp-button buttonType="submit" iconClass="fa fa-save">
      {{ 'AbpSettingManagement::Save' | abpLocalization }}
    </abp-button>
    <button
      *abpPermission="emailingPolicy"
      type="button"
      (click)="openSendEmailModal()"
      class="btn btn-primary mx-2"
    >
      <i class="fa f-send" aria-hidden="true"></i>
      {{ 'AbpSettingManagement::SendTestEmail' | abpLocalization }}
    </button>
  </form>
}

<abp-modal [(visible)]="isEmailTestModalOpen" [options]="modalSize">
  <ng-template #abpHeader>
    <h3>{{ 'AbpSettingManagement::SendTestEmail' | abpLocalization }}</h3>
  </ng-template>

  <ng-template #abpBody>
    <form [formGroup]="emailTestForm" id="emailTestForm" (ngSubmit)="emailTestFormSubmit()">
      <div class="mb-3 form-group">
        <label class="form-label">{{
          'AbpSettingManagement::SenderEmailAddress' | abpLocalization
        }}</label>
        <input class="form-control" formControlName="senderEmailAddress" />
      </div>

      <div class="mb-3 form-group">
        <label class="form-label">{{
          'AbpSettingManagement::TargetEmailAddress' | abpLocalization
        }}</label>
        <input class="form-control" formControlName="targetEmailAddress" />
      </div>

      <div class="mb-3 form-group">
        <label class="form-label">{{ 'AbpSettingManagement::Subject' | abpLocalization }}</label>
        <input class="form-control" formControlName="subject" />
      </div>

      <div class="mb-3 form-group">
        <label class="form-label">{{ 'AbpSettingManagement::Body' | abpLocalization }}</label>
        <textarea class="form-control" formControlName="body"></textarea>
      </div>
    </form>
  </ng-template>

  <ng-template #abpFooter>
    <abp-button
      buttonType="submit"
      iconClass="fa fa-send"
      formName="emailTestForm"
      [disabled]="emailTestForm.invalid && emailTestForm.dirty"
    >
      <span>{{ 'AbpSettingManagement::Send' | abpLocalization }}</span>
    </abp-button>

    <button type="button" class="btn btn-secondary" abpClose>
      {{ 'AbpUi::Close' | abpLocalization }}
    </button>
  </ng-template>
</abp-modal>
